<template>
    <div class="topicModule main" v-if="tableData.length > 0">
        <div class="topic-box">
            <div class="topicList">
                <div
                    class="topicItem"
                    v-for="(item, index) in tableData"
                    :key="index"
                >
                    <div class="avatarBox">
                        <a class="avatarLink" href="javascript:void(0);">
                            <img
                                v-if="item.real === '1'"
                                :src="
                                    item.src ||
                                    require('src/assets/imgs/use.png')
                                "
                            />
                            <img
                                v-else
                                :src="
                                    require('src/assets/imgs/use.png')
                                "
                            />
                        </a>
                    </div>

                    <div class="content clearfix">
                        <ul class="info">
                            <li>
                                <span class="tag">{{ item.tagName }}</span>
                                <a class="userName" href="javascript:void(0);">
                                    <span v-if="item.real === '1'">{{
                                        item.nickName
                                    }}</span>
                                    <span v-else>匿名用户</span>
                                </a>

                                <span class="postTime"
                                    >发表时间：{{ item.createTime }}</span
                                >
                                <!-- <span class="lastReplyTime"
                                    >最新回复：{{ item.modifyTime }}</span
                                > -->
                            </li>
                        </ul>
                        <h2 class="title clearfix">
                            <a
                                href="javascript:void(0);"
                                @click="routerPush(item.id, 'articleDetail')"
                            >
                                {{ item.title }}
                            </a>
                        </h2>
                        <div class="clearfix"></div>

                        <div class="detail">
                            <h2 class="summary" v-html="item.des"></h2>
                        </div>
                    </div>
                    <div class="statistic clearfix">
                        <div class="viewTotal">
                            <i class="el-icon-view"></i>
                            {{ item.views }}
                        </div>

                        <div class="commentTotal">
                            <i class="el-icon-chat-dot-round"></i>
                            {{ item.commentCount }}
                        </div>
                    </div>
                </div>
                <div class="topicPage"  v-if="pager.total>10">
                    <pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :pageNo="pager.pageNo"
                        :pageSize="pager.pageSize"
                        :total="pager.total"
                    >
                    </pagination>
                </div>
            </div>
        </div>
    </div>
    <div v-else class="searchEmptyBox main">
        <div style="background: #fff; height: 1px"></div>
        <h1 class="searchInfo">{{resultText}}</h1>
    </div>
</template>

<script lang="ts">
import { onMounted,ref } from 'vue';
import { getArticle } from 'src/plugins/http/server/article/index';
import userHooks from 'src/hooks/userHooks';
import { useRoute, onBeforeRouteUpdate } from 'vue-router';
import pagination from '@/components/pagination/index.vue';
import store from 'src/store';

export default {
    'components': {
        pagination
    },
    setup() {
        const { pager, tableData,routerPush} = userHooks({});
        const $route = useRoute();
        const resultText = ref('查询中请稍后...');
        const getTopic = (keyWords: string | string[]) => {
            getArticle({
                'data': {
                    'pageNo': pager.pageNo,
                    'pageSize': pager.pageSize,
                    'self': false,
                    'keyWord': keyWords
                }
            })
                .then((res: any) => {
                    res.data.articleDatas.forEach((item: articleObj) => {
                        item.createTime = UtilTools.formatDateTime({
                            'date': item.createTime
                        });
                        item.tagName = store.state.tagData.filter(
                            (tag: tagObj) => tag.id === item.tagId
                        )[0]?.value;
                    });
                    tableData.value = res.data.articleDatas;
                    pager.total = res.data.total;
                    if (res.data.articleDatas.length<=0){
                        resultText.value = '抱歉：未能替您查询出相关信息';
                    }
                })
                .catch(e => {
                    console.log(e);
                });
        };
        onBeforeRouteUpdate(to => {
            getTopic(to.params.keyWords);
        });

        //切换页面大小方法
        const handleSizeChange = (val: number) => {
            pager.pageSize = val;
            pager.pageNo = 1;
            getTopic($route.params.keyWords);
        }; //分页方法
        const handleCurrentChange = (val: number) => {
            pager.pageNo = val;
            getTopic($route.params.keyWords);
        };
        onMounted(() => {
            getTopic($route.params.keyWords);
        });
        return {
            tableData,
            resultText,
            pager,
            routerPush,
            handleSizeChange,
            handleCurrentChange
        };
    }
};
</script>
<style lang='less' scoped>
@import "~@/views/article/list/index.less";
@import "~@/views/article/search/index.less";
</style>